@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;

@mixin color($theme) {
  $config: mat.get-color-config($theme);

  $primary: map.get($config, 'primary');
  $accent: map.get($config, 'accent');
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);

  .pac-home__quick-guide {
    border-top: 3px solid mat.get-color-from-palette($accent);
    border-radius: 3px;
    min-height: 100px;
  }

  .pac-home__assets-types.mat-button-toggle-group {
    .mat-button-toggle-label-content {
      padding: 0 22px;
    }
  }

  .assets-list {
    .mat-mdc-list-item {
      &:hover {
        background-color: mat.get-color-from-palette($background, hover);
      }
    }
  }

  .pac-home__widget {
    height: 100%;
    border-radius: 3px;
    .mat-card-title {
      font-size: 1rem;
    }

    .line {
      display: flex;
      margin: 8px 0;
      white-space: nowrap;

      .name {
        overflow: hidden;
      }

      .visit-at {
        font-size: 0.75em;
      }
    }

    .ranking {
      background-color: color.change(mat.get-color-from-palette($accent, 100), $alpha: 0.1);
      color: mat.get-color-from-palette($accent, 500);
    }
  }

  .pac-story-widget-feed {
    .ngm-story-widget__content {
      &.ngm-story-widget__card, &.ngm-story-widget__table {
        background: mat.get-color-from-palette($background, card);
        border-radius: 5px;
        color: mat.get-color-from-palette($foreground, text);
        @apply shadow-sm;
      }
    }
  }

}

@mixin typography($theme) {
}

@mixin density($theme) {
}

@mixin theme($theme) {
  $color: mat.get-color-config($theme);
  $density: mat.get-density-config($theme);
  $typography: mat.get-typography-config($theme);

  @if $color != null {
    @include color($color);
  }
  @if $density != null {
    @include density($density);
  }
  @if $typography != null {
    @include typography($typography);
  }
}
